<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>酒店后台管理系统</title>
    <script src="../static/layui/layui.js"></script>
    <link rel="stylesheet" href="../static/layui/css/layui.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <!--1.头部区域-->
    <div class="layui-header">
        <div class="layui-logo" style="font-size: 22px;font-weight: bolder">酒店后台管理系统</div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item"><a href="javascript:;" id="user">欢迎您，</a></li>
            <li class="layui-nav-item"><a href="javascript:;" id="logout">退出</a></li>
        </ul>
    </div>
    <!--2.左侧导航-->
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree"  lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;">用户管理</a>
                    <dl class="layui-nav-child">
                        <dd class="layui-nav-item leftdaohang" data-url="/user/toUserInfo" mytitle="用户信息"><a href="javascript:;">用户信息</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;">房间管理</a>
                    <dl class="layui-nav-child">
                        <dd class="layui-nav-item leftdaohang" data-url="/manage/toBookRoom" mytitle="预订房间管理"><a href="javascript:;">预订房间管理</a></dd>
                        <dd class="layui-nav-item leftdaohang" data-url="/manage/toUseRoom" mytitle="入住房间管理"><a href="javascript:;">入住房间管理</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>
    <!--3.右侧主体内容区-->
    <div class="layui-body">
        <!--tabs标签-->
        <div class="layui-tab layui-tab-card" lay-filter="demo" lay-allowclose="true">
            <ul class="layui-tab-title"></ul>
            <div class="layui-tab-content"></div>
        </div>
    </div>

    <!--4.底部固定区域-->
    <div class="layui-footer">
        <!-- 底部固定区域 -->
        © layui.com - 底部固定区域
    </div>
</div>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
    // 导航栏跳转
    layui.use('element', function(){
        var $ = layui.jquery
            ,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块

        //触发事件
        var active = {
            tabAdd: function(){
                //新增一个Tab项
                var htmlurl=$(this).attr('data-url');
                var mytitle=$(this).attr('mytitle');
                //先判断是否已经有了tab
                var arrayObj = new Array();　//创建一个数组
                $(".layui-tab-title").find('li').each(function() {
                    var y = $(this).attr("lay-id");
                    arrayObj.push(y);
                });
                $(".layui-tab-title").find('dd').each(function() {
                    var y = $(this).attr("lay-id");
                    arrayObj.push(y);
                });
                var have=$.inArray(mytitle, arrayObj);  //返回 3,
                if (have>=0) {
                    element.tabChange('demo', mytitle); //切换到当前点击的页面
                } else{
                    element.tabAdd('demo', {
                        title:mytitle //用于演示
                        ,content: '<iframe style="width: 100%;height: 720px;" scrolling="no" src='+htmlurl+' ></iframe>'
                        ,id: mytitle //实际使用一般是规定好的id，这里以时间戳模拟下
                    });
                    element.tabChange('demo', mytitle); //切换到当前点击的页面
                }
            }

        };
        $(".leftdaohang").click(function(){
            var type="tabAdd";
            var othis = $(this);
            active[type] ? active[type].call(this, othis) : '';
        });
    });

    //从后台读取user
    $(document).ready(function(){
        function loadUser(){
            $.ajax({
                type: 'get',
                url: '/user/getPhone',
                success: function(data) {
                    //console.log(data);
                    //将获取的data赋值给user
                    $('#user').text('欢迎您，' + data);
                },
                error: function() {
                    alert('请求失败');
                }
            });
        }
        //加载名称
        loadUser();

        //退出登录
        $('#logout').on('click', function(){
            $.ajax({
                url: '/user/logout',
                method: 'get',
                success: function(data){
                    alert(data);
                    window.location.href = '/user/toLogin';
                }
            })
        });
    });
</script>
</body>
</html>